<script setup lang="ts">
import { ref, watch } from "vue";
import { useSearchStore } from "@/stores/search";
import { usePlayerStore } from "@/stores/player";
import { useUserStore } from "@/stores/user";
import { useRouter } from "vue-router";
import Navbar from "@/components/Navbar.vue";
import { IconPlay, IconMusic } from "@/components/icons";
import PlaylistCard from "@/components/PlaylistCard.vue";
import SongList from "@/components/SongList.vue";

const searchStore = useSearchStore();
const playerStore = usePlayerStore();
const userStore = useUserStore();
const router = useRouter();

const navItems = [
  { id: "songs", name: "单曲" },
  { id: "artists", name: "歌手" },
  { id: "playlists", name: "歌单" },
];

const currentTab = ref(navItems[0]);

const handlePlaySong = (song: any) => {
  if (song.musicName && song.musicAuthor) {
    playerStore.playSong({
      id: song.id,
      title: song.musicName,
      artist: song.musicAuthor,
      cover: song.musicCoverUrl || "",
      url: song.musicUrl || "",
    });
  }
};

const updateSearchResults = async () => {
  const typeMap: Record<string, string> = {
    songs: "1",
    playlists: "2",
    artists: "3",
  };

  console.log(typeMap[currentTab.value.id]);

  await searchStore.search(
    searchStore.searchKeyword,
    typeMap[currentTab.value.id],
    userStore.uid
  );
};

const goToArtistProfile = (artistId: number) => {
  router.push(`/artist/${artistId}`);
};

const getEmptyText = () => {
  switch (currentTab.value.id) {
    case "songs":
      return "暂无相关歌曲";
    case "artists":
      return "暂无相关音乐人";
    case "playlists":
      return "暂无相关歌单";
    default:
      return "暂无搜索结果";
  }
};

// 监听 tab 变化时重新搜索
watch(currentTab, () => {
  if (searchStore.searchKeyword) {
    updateSearchResults();
  }
});
</script>

<template>
  <div class="p-4 max-w-7xl mx-auto">
    <div class="mb-8">
      <h1 class="text-2xl font-bold mb-2">
        搜索 "{{ searchStore.searchKeyword }}"
      </h1>
      <p class="text-gray-500">
        找到相关结果
        {{ searchStore.searchResults?.total || 0 }}
        个
      </p>
    </div>

    <Navbar v-model="currentTab" :items="navItems" class="mb-6" />

    <!-- 单曲搜索结果 -->
    <div v-show="currentTab.id === 'songs'">
      <template v-if="searchStore.songs?.length">
        <SongList :songs="searchStore.songs" />
      </template>
      <div v-else class="empty-state">
        <IconMusic class="w-16 h-16 text-gray-300 mb-4" />
        <p class="text-gray-500">{{ getEmptyText() }}</p>
      </div>
    </div>

    <!-- 歌手搜索结果 -->
    <div v-show="currentTab.id === 'artists'" class="grid grid-cols-5 gap-6">
      <template v-if="searchStore.artists?.length">
        <div
          v-for="artist in searchStore.artists"
          :key="artist.id"
          class="flex flex-col items-center cursor-pointer hover:opacity-80"
          @click="goToArtistProfile(artist.id)"
        >
          <img
            :src="artist.avatarUrl"
            :alt="artist.uname"
            class="w-40 h-40 rounded-full object-cover mb-3"
          />
          <h3 class="font-medium text-center hover:underline">
            {{ artist.uname }}
          </h3>
        </div>
      </template>
      <div v-else class="empty-state col-span-5">
        <IconMusic class="w-16 h-16 text-gray-300 mb-4" />
        <p class="text-gray-500">{{ getEmptyText() }}</p>
      </div>
    </div>

    <!-- 歌单搜索结果 -->
    <div v-show="currentTab.id === 'playlists'" class="grid grid-cols-5 gap-6">
      <template v-if="searchStore.playlists?.length">
        <router-link
          v-for="playlist in searchStore.playlists"
          :key="playlist.id"
          :to="`/playlist/${playlist.id}`"
        >
          <PlaylistCard
            :id="playlist.id"
            :title="playlist.name"
            :cover-url="playlist.coverUrl"
            :play-count="playlist.playCount || 0"
          />
        </router-link>
      </template>
      <div v-else class="empty-state col-span-5">
        <IconMusic class="w-16 h-16 text-gray-300 mb-4" />
        <p class="text-gray-500">{{ getEmptyText() }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
:deep(.el-table) {
  --el-table-border-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-hover-bg-color: #f9fafb;
}

:deep(.el-table__inner-wrapper::before) {
  display: none;
}

:deep(.el-table__cell) {
  border-bottom: none;
}

:deep(.el-table__row) {
  border-radius: 8px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
  text-align: center;
}
</style>
